<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="催单"
      :visible.sync="visible"
      width="600px"
      height="600px"
      append-to-body
    >
      <div>
        <el-radio-group v-model="radio" class="arrive" @change="radioChange">
          <el-radio :label="1">立即送达</el-radio>
          <el-radio :label="2">半小时内送达</el-radio>
          <el-radio :label="3">一小时内送达</el-radio>
        </el-radio-group>
        <p class="lab">自定义：</p>
        <el-input
          v-model.trim="textarea"
          type="textarea"
          :rows="2"
          maxlength="30"
          show-word-limit
          placeholder="请输入内容"
          @input="textareaInput"
        />
        <div class="urge-record">
          <div class="head">
            <h4>催单记录<span>{{ urgeList.length?'('+urgeList.length+')':'' }}</span></h4>
          </div>
          <div class="content">
            <div v-for="(item,index) of urgeList" :key="index" class="urge-item">
              <div class="item-left">
                <div class="item-head">
                  <span />
                  <span>{{ item.happentDt }}</span>
                </div>
                <div class="item-content">
                  <p>{{ item.regUser }}</p>
                  <p>催单一次</p>
                  <p>理由：<span>{{ item.remark }}</span></p>
                </div>
              </div>

              <div v-if="item.readStatus===2" class="item-right">
                <div class="item-head">
                  <span />
                  <span>{{ item.readTime }}</span>
                </div>
                <div class="item-content">
                  <p>配送员已读</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="reminders">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { crmOrderUrge, crmOrderUrgeList } from '@/api'
  import dayjs from 'dayjs'
  export default {
    name: 'reminders',
    data() {
      return {
        radio: 1,
        visible: false,
        textarea: '',
        urgeList: [],
        remarkList: ['立即送达', '半小时内送达', '一小时内送达'],
        currentRow: {}
      }
    },

    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          this.currentRow = temp
          this.getUrgeList()
        })
      },
      close() {
        this.visible = false
        this.radio = 1
        this.textarea = ''
        this.$emit('close')
      },
      radioChange() {
        this.textarea = ''
      },
      textareaInput(e) {
        if (e) {
          this.radio = undefined
        } else {
          this.radio = 1
        }
      },
      async getUrgeList() {
        const params = {
          // corpSN: this.currentRow.corpSN,
          // orderCode: this.currentRow.orderCode
          billCode: this.currentRow.orderCode,
          billType: 1
        }
        const res = await crmOrderUrgeList(params)
        if (res && res.data) {
          this.urgeList = res.data.map((item) => ({
            ...item,
            happentDt: item.happentDt ? dayjs(item.happentDt).format('YYYY-MM-DD HH:mm:ss') : '',
            readTime: item.readTime ? dayjs(item.readTime).format('YYYY-MM-DD HH:mm:ss') : ''
          }))
        }
      },
      async reminders() {
        const params = {
          // corpSN: this.currentRow.corpSN,
          // orderCode: this.currentRow.orderCode,
          billCode: this.currentRow.orderCode,
          billType: 1,
          remark: this.radio ? this.remarkList[Number(this.radio) - 1] : this.textarea
        }
        const res = await crmOrderUrge(params)
        if (res && res.data) {
          this.$message.success('操作成功')
          this.close()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.arrive {
  label {
    display: block;
    margin-bottom: 10px;
  }
}
.lab {
  margin-bottom: 10px;
}

.urge-record {
  margin-top: 10px;
  .head {
    display: flex;
    align-items: center;
  }
  h4 {
    margin: 0;
    margin-right: 20px;
    font-weight: 700;
    line-height: 24px;
    span {
      color: #12b1b1;
    }
  }
  .content {
    margin-top: 20px;
    .urge-item {
      display: flex;
      justify-content: space-between;
      .item-left,
      .item-right {
        .item-head {
          display: flex;
          align-items: center;
          span {
            display: block;
          }
          span:nth-child(1) {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            background-color: #12b1b1;
            border-radius: 50%;
          }
          span:nth-child(2) {
            line-height: 30px;
            color: #909399;
          }
        }
        .item-content {
          display: flex;
          padding-left: 28px;
          p {
            margin-right: 10px;
            font-weight: bold;
          }
          p:nth-child(1) {
            width: 172px;
            min-width: 172px;
          }
          p:nth-child(2) {
            width: 60px;
            min-width: 60px;
          }
          p:nth-child(3) {
            width: auto;
          }
        }
      }
      .item-left {
        flex: 1;
      }
      .item-right {
        .item-content {
          p:nth-child(1) {
            width: 100px;
            min-width: 100px;
          }
        }
      }
    }
  }
}
</style>
